<template>
  <scroll-view @scrolltolower="lowerBottom" @scroll="scroll" ref="content" scroll-y="true" class="scroll-view content" :enhanced="true" :bounces="false" :show-scrollbar="false">
    <!-- 主要是用 scroll-view 标签包裹住内容  -->
    <view class="page home">
      <xlNavBar title="餐饮信息网" bgc="ff9d49" @selectAddress="showCityPopup = true" :showLeft="true" :addressText="locationText" :showSelectAddress="true"></xlNavBar>
      <div class="container">
        <div class="c1">
          <div class="wrap">
            <kingKong @clickItem="clickItem" :list="kingKongList" v-if="swiperList"></kingKong>
            <div class="swiper" v-if="swiperList.length > 0">
              <u-swiper height="100%" circular :list="swiperList" @change="swiperChange" :autoplay="true" @click="$throttle(click)">
                <view slot="indicator" class="indicator">
                  <view class="indicator__dot" v-for="(item, index) in swiperList" :key="item.id" :class="[index === swiperCurrent && 'indicator__dot--active']"></view>
                </view>
              </u-swiper>
            </div>
          </div>
        </div>

        <div class="tabs">
          <u-tabs
            :list="list1"
            lineColor="#FF8822"
            :current="tabActiveIndex"
            :activeStyle="{
              fontWeight: 600,
              color: '#000',
            }"
            @change="tabChange"
          ></u-tabs>

          <div class="right-position">
            <i class="iconfont cyweizhi" @click="click3"></i>
            <text class="tap" @click="showCityPopup = true">{{ locationText }}</text>
            <div class="tips" v-if="showLocationTips">
              <div class="title-wrap">
                <span>点击此处选择地址</span>
                <i class="iconfont cyguanbixiao" @click="closeTips"></i>
              </div>
              <div class="content">开启定位获取精准信息和服务</div>
              <div class="btn" @click="$throttle(startLocation)">立即开启</div>
            </div>
            <div class="tips" v-if="showLocationTips2">
              <div class="title-wrap">
                <span>点击此处选择地址</span>
                <i class="iconfont cyguanbixiao" @click="closeTips"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-content" :style="{ paddingBottom: !showMore ? '60px' : '' }">
          <loadFail v-if="$intenetState"></loadFail>
          <div v-if="tabActiveIndex == 0">
            <div class="zhaopin" v-if="contentInfo[0]['list'].length > 0">
              <!-- <u-list @scrolltolower="scrolltolower">
                <u-list-item v-for="(item, index) in jobList" :key="index"> -->
              <div class="tab-list" v-for="(item, index) in contentInfo[0]['list']" :key="index">
                <jobItem :data="item" itemType="1" type="3" titleTagText="招聘" btnText="联系老板"></jobItem>
              </div>
              <!-- </u-list-item>
              </u-list> -->
            </div>
            <load-fail
              height="513px"
              v-else
              @click="$throttle(click3)"
              src="/static/images/common/nodata.png"
              text="抱歉，当前城市无信息，可切换所在省份查看"
              btnText="立即切换"
            ></load-fail>
          </div>
          <div v-if="tabActiveIndex == 1">
            <div v-if="contentInfo[1]['list'] && contentInfo[1]['list'].length > 0">
              <div class="tab-list qiuzhi" v-for="item in contentInfo[1]['list']" :key="item.id">
                <resumeItem :data="item" itemType="2" type="3" titleTagText="求职" btnText="联系对方"></resumeItem>
              </div>
            </div>

            <load-fail v-else @click="$throttle(click3)" src="/static/images/common/nodata.png" text="抱歉，当前城市无信息，可切换所在省份查看" btnText="立即切换"></load-fail>
          </div>

          <div v-if="tabActiveIndex == 2">
            <div v-if="contentInfo[2]['list'] && contentInfo[2]['list'].length > 0">
              <div class="c-container" @click="handleStoreDetail(item.id)" v-for="item in contentInfo[2]['list']" :key="item.id">
                <view class="c-c-title">
                  <span class="t-badge">招租/转店</span>
                  {{ item.store_highlight }}
                </view>
                <view class="c-c-info">
                  <view class="i-card">
                    <view class="name">
                      {{ item.monthly_rent }}
                      <span class="unit">元/月</span>
                    </view>
                    <view class="text">{{ (item.monthly_rent / item.store_area / 30).toFixed(1) }}元/m²/天</view>
                  </view>
                  <view class="i-card">
                    <view class="name">
                      {{ item.store_area }}
                      <span class="unit">m²</span>
                    </view>
                    <view class="text">面积</view>
                  </view>
                  <view class="i-card">
                    <view class="name">
                      {{ item.is_transfer_fee !== 1 ? "无转让费" : item.is_show_transfer_fee === 1 ? (item.transfer_fee/10000).toFixed(2) + "万元" : "面议" }}
                    </view>
                    <view class="text">转让费</view>
                  </view>
                </view>
                <view class="c-c-image" v-if="item.store_image.length > 0">
                  <image class="image" @click.stop="previewImage(index, item.store_image)" v-for="(img, index) in item.store_image" :key="img" :src="img" mode="aspectFill" />
                </view>
                <view class="c-c-address">
                  <view class="a-info">
                    <i class="iconfont cyweizhi"></i>
                    <view class="address">{{ item.store_address }}</view>
                    <text class="time">{{ item.show_time }}</text>
                  </view>
                  <view class="a-btn" @click.stop="handleContact(item)">
                    <i class="iconfont cydianhua"></i>
                    免费联系
                  </view>
                </view>

                <img class="c-c-top" v-if="item.is_top" src="@/static/images/common/redzhiding.png" mode="widthFix" />
              </div>
            </div>

            <load-fail v-else @click="$throttle(click3)" src="/static/images/common/nodata.png" text="抱歉，当前城市无信息，可切换所在省份查看" btnText="立即切换"></load-fail>
          </div>
          <div v-if="tabActiveIndex == 3">
            <div class="tab-list canyin">
              <load-fail
                height="400px"
                :showBtn="false"
                @click="$throttle(click3)"
                src="/static/images/common/nodata.png"
                text="功能正在开发中,敬请期待..."
                btnText="立即切换"
              ></load-fail>
            </div>
          </div>
        </div>
      </div>
      <div class="ydts" v-show="(showMore && contentInfo[0]['list'].length > 0) || (showMore && contentInfo[1]['list'].length > 0)" :class="[$isIos() == 'IOS' ? 'ios' : '']">
        <div class="ydts_wrap" @click="$throttle(goFindWord)">
          <span class="p1">{{ tabActiveIndex == 0 ? "更多海量好活，" : tabActiveIndex == 1 ? "更多求职者，" : "更多店铺信息，" }}</span>
          <span class="p2">点击查看</span>
        </div>
      </div>

      <selectCityPopup v-if="showCityPopup" @close="$throttle(click5)" :show="showCityPopup" @submit="sumitCityPopup" @getData="$throttle(getcityData)"></selectCityPopup>
      <xlTabBar @clickcenter="$throttle(click4)" :selected="0"></xlTabBar>

      <div class="tip-share" v-if="(showTipShare && showMfsjf == 1) || (showTipShare && getUserInfo.integral <= 3)">
        <button hover-class="none" class="share-btn" type="default" @click="showjfjl = true">
          <image class="image" src="@/static/images/common/tip-share.png" mode="scaleToFill" />
        </button>
        <image @click="closeTipShare" class="close" src="@/static/images/common/close-share.png" mode="scaleToFill" />
      </div>
      <jfjlPopup :show="showjfjl" @close="showjfjl = false"></jfjlPopup>

      <TipPopup
        :title="tipOption.title"
        :content="tipOption.content"
        :submitText="tipOption.submitText"
        @submitTip="tipOption.submit()"
        @closeTip="closeTip"
        v-if="tipPopup"
      ></TipPopup>
      <ContactBoss @submitCall="submitCall" @submitIntention="submitIntention" @close="closeContactBoss" v-if="contactBossPopup"></ContactBoss>
    </view>
  </scroll-view>
</template>

<script>
import jobItem from "@/pagesHome/components/jobItem.vue";
import resumeItem from "@/pagesHome/components/resumeItem.vue";
import selectCityPopup from "@/pagesHome/components/popup/selectCityPopup.vue";
import kingKong from "@/pagesHome/components/home/kingKong.vue";
import loadFail from "@/pagesHome/components/common/loadFail.vue";
import postDemand from "@/pagesHome/components/popup/postDemand.vue";
import jfjlPopup from "../popup/jfjlPopup.vue";
import TipPopup from "../tipPopup.vue";
import ContactBoss from "../contactBoss.vue";

import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
export default {
  name: "Home",
  components: {
    kingKong,
    jobItem,
    resumeItem,
    selectCityPopup,
    loadFail,
    postDemand,
    jfjlPopup,
    TipPopup,
    ContactBoss,
  },
  props: {
    reloadPage: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      jobList: [],
      resumeList: [],
      showMore: false,
      showjfjl: false,
      showpostDemand: false,
      showCityPopup: false,
      showLocationTips: false,
      showLocationTips2: false,
      showTipShare: false,
      title: "Hello",
      tabLineColor: "#333333",
      tabActiveIndex: 0,
      // locationText: "全国",
      kingKongList: [
        {
          id: 1,
          url: "",
          icon: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/46_1681739128079294015.iGgsZketqwXY60d034dc8d3309525d6b51efb01ad12f.png",
          title: "招聘求职",
          // hotText: "热",
          bgColor: "#FFF8F2",
          color: "#333333",
          desc: "免费发布需求",
        },
        {
          id: 2,
          url: "",
          icon: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/46_1681739185565714536.UzeOtJ7TxN8Sff470a934211323670066da317eac3e6.png",
          title: "招租转店",
          hotText: "",
          bgColor: "#EFF7FE",
          color: "#333333",
          desc: "资源丰富 真实精准",
        },
        {
          id: 3,
          url: "",
          icon: "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/46_1681739210742983877.Ggd6mIvGfU0G75ef71eae9853eba2435915d6b1e9bbb.png",
          title: "餐饮服务商",
          hotText: "",
          bgColor: "#ECFDE8",
          color: "#333333",
          desc: "海量服务保驾护航",
        },
      ],
      swiperList: [],
      swiperCurrent: 0,
      list1: [
        {
          name: "招聘",
        },
        {
          name: "求职",
        },
        {
          name: "招租转店",
        },
        {
          name: "餐饮服务商",
        },
      ],
      contentInfo: [
        {
          name: "招聘",
          sourceUrl: "/jobs/list",
          list: [],
          finished: false,
          postParams: {
            type: 1, //列表类型 1、推荐，2、附近、3、最新
            // filter: 3, //过滤条件
            Filter: {
              city_codes: "", // 城市筛选，多个逗号间隔  默认空
              // city_codes: "310115", // 城市筛选，多个逗号间隔  默认空
              //传选中城市的层级ID（比如选中河北石家庄，则传 130000,130100）
              job_intention: "", // 岗位，多个逗号间隔
            },
            // longitude: 0, //经度
            // latitude: "", //经度
            page_num: 1, // 页码
            page_size: 5, // 每页个数
          },
        },
        {
          name: "求职",
          sourceUrl: "/resumes/list",
          list: [],
          finished: false,
          postParams: {
            type: 1, //列表类型 1、推荐，2、附近、3、最新
            // filter: 3, //过滤条件
            Filter: {
              city_codes: "", // 城市筛选，多个逗号间隔  默认空
              // city_codes: "310115", // 城市筛选，多个逗号间隔  默认空
              //传选中城市的层级ID（比如选中河北石家庄，则传 130000,130100）
              job_intention: "", // 岗位，多个逗号间隔
            },
            // longitude: 0, //经度
            // latitude: "", //经度
            page_num: 1, // 页码
            page_size: 5, // 每页个数
          },
        },
        {
          name: "招租转店",
          sourceUrl: "/storefronts/list",
          list: [],
          finished: false,
          postParams: {
            type: 1,
            Filter: {
              city_codes: "",
              job_intention: "",
            },
            page_num: 1,
            page_size: 5,
          },
        },
      ],
      tipPopup: false,
      contactBossPopup: false,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {},
      },
      showContactPopup: false,
      storeDetail: null,
      userIntegralInfo: null,
    };
  },
  async onLoad() {
    await this.$intenet.intenetChange();
  },
  async created() {
    this.contentInfo[0].list = [];
    this.contentInfo[1].list = [];
    this.contentInfo[0].postParams.page_num = 1;
    this.contentInfo[1].postParams.page_num = 1;
    // this.contentInfo[2].list = [];
    // this.contentInfo[3].list = [];
    // this.$confirm({
    //   show: true,
    // });
    // this.getBanner();
    if (this.getSelectCity.length || this.userLocationInfo) {
      if (this.getSelectCity.length) {
        this.contentInfo[this.tabActiveIndex].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
        // this.locationText = this.getSelectCity[0]["fullname"];
      } else if (this.userLocationInfo) {
        // this.locationText = this.userLocationInfo.ad_info.province;
        this.contentInfo[this.tabActiveIndex].postParams.Filter.city_codes = this.userLocationInfo.ad_info.adcode;
      }
      this.showLocationTips = false;
      this.showLocationTips2 = false;
    } else {
      this.getLocation();
    }
    if (this.$getStoraged("isShowLoactionTips") && this.$getStoraged("isShowLoactionTips") == 1) {
      this.showLocationTips = false;
      this.showLocationTips2 = false;
    }
  },
  mounted() {
    if (this.$getStoraged("noShowLocationTips") == "1") {
      this.showLocationTips = false;
      this.showLocationTips2 = false;
    }
    if ((this.getUserInfo && this.getUserInfo.integral < 3) || this.$getStoraged("showMfsjf") == 1) {
      this.showTipShare = true;
    }
  },
  computed: {
    ...mapGetters("user", ["getUserInfo", "getSystemInfo", "showMfsjf"]),
    ...mapGetters("location", ["getUserLocationInfo", "getCurProvince", "getSelectCity"]),
    locationText() {
      console.log("300", this.getSelectCity);
      if (this.getSelectCity.length) {
        this.contentInfo[0].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
        this.contentInfo[1].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
        // this.contentInfo[2].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
        // this.contentInfo[3].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
        return this.getSelectCity[0]["fullname"];
      }
      // else if (this.getCurProvince) {
      //   return this.getCurProvince?.text;
      // }
      return "全国";
    },
    selectCity() {
      return this.getSelectCity;
    },
  },
  methods: {
    ...mapMutations("location", ["setUserLocationInfo", "setSelectCity"]),
    ...mapMutations(["setSystemInfo"]),
    closeTipShare() {
      console.log(111);
      this.showTipShare = false;
    },
    closeTips() {
      if (this.showLocationTips || this.showLocationTips2) {
        this.showLocationTips = false;
        this.showLocationTips2 = false;
        this.$setStoraged("noShowLocationTips", 1);
      }
    },
    click3() {
      this.showCityPopup = true;
    },
    click4() {
      this.showpostDemand = true;
    },
    click4() {
      this.showCityPopup = false;
    },
    startLocation() {
      this.showLocationTips = false;
      this.$setStoraged("isShowLoactionTips", 1);
      this.getLocation();
    },
    clickItem(index) {
      switch (index) {
        case 0:
          if (this.$getStoraged("showFindPopup").length) {
            this.$jump("/pages2/findWork?isPageTitleFind=0");
          } else {
            this.$jump("/pages2/findWork?isPageTitleFind=1");
          }
          break;
        case 1:
          this.$jump("/shopPackage/rentStore");
          break;
        case 2:
          this.$layer.message("功能正在开发中,敬请期待...");
          break;
      }
    },
    previewImage(index, imageList) {
      uni.previewImage({
        current: index,
        urls: imageList,
      });
    },
    handleStoreDetail(id) {
      this.$togo("/shopPackage/storeDetail?id=" + id);
    },
    //监听页面触底加载
    lowerBottom() {},
    scroll(e) {
      // 获取组件的位置信息
      //#ifdef MP-WEIXIN
      const query = uni.createSelectorQuery();
      query
        .select(".content")
        .boundingClientRect(rect => {
          console.log(this.getSystemInfo);
          if (this.getSystemInfo) {
            if (e.detail.scrollTop + this.getSystemInfo.windowHeight < e.detail.scrollHeight - 300) {
              this.$throttle(() => {
                this.contentInfo[this.tabActiveIndex].postParams.page_num += 1;
                console.log(this.contentInfo[this.tabActiveIndex]["finished"]);
                if (!this.contentInfo[this.tabActiveIndex]["finished"]) {
                  this.getList(false, this.contentInfo[this.tabActiveIndex]);
                }
              }, 500);
            }
          }
        })
        .exec();
      if (this.showLocationTips || this.showLocationTips2) {
        this.showLocationTips = false;
        this.showLocationTips2 = false;
        this.$setStoraged("noShowLocationTips", 1);
      }
      //#endif
      //#ifdef  APP-PLUS || H5
      console.log(this.$refs.content);
      //#endif
    },

    async getLocation() {
      //#ifdef H5 || MP-WEIXIN

      let res = await this.$getLocationPromise();
      console.log("getLocationPromise", res);
      if (res) {
        let res2 = await this.$http.request(
          "https://apis.map.qq.com/ws/geocoder/v1/?key=6KJBZ-ZB2W4-NXNUB-DT7KO-E4KMJ-7KB5L&location=" + res.latitude + "," + res.longitude,
          "GET",
          {},
          data => {
            console.log("data.resultdata.resultdata.result", data.result);
            let municipality = ["上海市", "北京市", "天津市", "重庆市"];
            this.$setStoraged("userLocationInfo", data.result);
            this.setSelectCity([
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);
            uni.setStorageSync("userSelectCity", [
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);
            this.setUserLocationInfo(data.result); //保存用户位置信息到vuex中，方便在选择地址时直接选择
            this.contentInfo[0].postParams.Filter.city_codes = data.result.ad_info.adcode.slice(0, 2) + "0000";
            this.contentInfo[1].postParams.Filter.city_codes = data.result.ad_info.adcode.slice(0, 2) + "0000";
            this.contentInfo[0].list = [];
            this.contentInfo[1].list = [];
            console.log(this.contentInfo[0].postParams);
            this.getList(true, this.contentInfo[this.tabActiveIndex]);
          }
        );
        this.showLocationTips2 = true;
      } else {
        this.showLocationTips = true;
        console.log(res);
      }
      //#endif
    },
    getcityData(data) {
      console.log("data", data);
      this.showCityPopup = false;
    },
    sumitCityPopup(data) {
      console.log(data);

      this.contentInfo[this.tabActiveIndex].postParams.Filter.city_codes = data.id;
      // this.getList(true, this.contentInfo[this.tabActiveIndex]);
      this.showCityPopup = false;
    },
    swiperChange(e) {
      this.swiperCurrent = e.current;
    },
    tabChange(data) {
      try {
        if (this.showLocationTips || this.showLocationTips2) {
          this.showLocationTips = false;
          this.showLocationTips2 = false;
          this.$setStoraged("noShowLocationTips", 1);
        }
        this.contentInfo[0]["postParams"]["page_num"] = 1;
        this.contentInfo[1]["postParams"]["page_num"] = 1;
        // 微信

        // #ifdef MP-WEIXIN
        this.tabActiveIndex = data.index;
        // #endif
        // #ifdef H5 || APP-PLUS
        this.tabActiveIndex = data.currentIndex;
        // #endif
      } catch (error) {
        console.log(error);
      }
    },

    goFindWord() {
      if (this.tabActiveIndex == 2) {
        this.$togo("/shopPackage/rentStore");
        return;
      }
      let params = {
        p: 0,
        isPageTitleFind: 1,
      };
      if (this.$getStoraged("showFindPopup").length) {
        params.p = 0;
      } else {
        params.p = 1;
      }
      this.tabActiveIndex == 0 ? (params.isPageTitleFind = 1) : (params.isPageTitleFind = 2);
      this.$togo("/pages2/findWork", params);
    },
    async getBanner() {
      let res = await this.$http.requestSync("/banner/list", {}, "GET");
      console.log(res);
      if (res.code == 200) {
        this.swiperList = res.banners;
      }
    },
    async getList(type, item) {
      if (!item) {
        return;
      }
      if (type) {
        item.list = [];
      }
      console.log(item, 519);
      let res = await this.$http.requestSync(item.sourceUrl, item.postParams);
      switch (item.name) {
        case "招聘":
          if (res.jobs) {
            console.log("进入了完成判断", this.contentInfo[this.tabActiveIndex]);
            res.jobs.forEach(item => {
              if (item && item.photo_urls) {
                item.photo_urls = item.photo_urls.indexOf(",") > -1 ? item.photo_urls.split(",") : [item.photo_urls];
                // this.$set(this.data, "photo_urls", this.urls2);
              }
            });

            if (!res.jobs || res.jobs.length < item.postParams.page_size) {
              this.contentInfo[this.tabActiveIndex].finished = true;
            }
            console.log(this.contentInfo[this.tabActiveIndex].postParams.finished);
            item.list = [...item.list, ...res.jobs];
            console.log(item);
            if (res.jobs.length < 6) {
              this.showMore = true;
            }
          } else {
            this.contentInfo[this.tabActiveIndex].finished = true;
            console.log("this.contentInfo[this.tabActiveIndex]", this.contentInfo[this.tabActiveIndex]);
          }
          break;
        case "求职":
          if (res.resumes) {
            res.resumes.forEach(item => {
              if (item && item.picture_url) {
                item.picture_url = item.picture_url.indexOf(",") > -1 ? item.picture_url.split(",") : [item.picture_url];
              }
            });
            if (!res.resumes || res.resumes.length < item.postParams.page_size) {
              this.contentInfo[this.tabActiveIndex].finished = true;
            }

            item.list = [...item.list, ...res.resumes];
            if (res.resumes.length < 6) {
              this.showMore = true;
            }
          } else {
            this.contentInfo[this.tabActiveIndex].finished = true;
          }
          break;
        case "招租转店":
          if (res.storefronts) {
            res.storefronts.forEach(item => {
              if (item && item.store_image) {
                item.store_image = item.store_image.indexOf(",") > -1 ? item.store_image.split(",") : [item.store_image];
              }
            });
            if (!res.storefronts || res.storefronts.length < item.postParams.page_size) {
              this.contentInfo[this.tabActiveIndex].finished = true;
            }

            item.list = [...item.list, ...res.storefronts];
            if (res.storefronts.length < 6) {
              this.showMore = true;
            }
          } else {
            this.contentInfo[this.tabActiveIndex].finished = true;
          }
          break;
        case "餐饮服务商":
          break;
      }
    },
    scrolltolower(data) {
      console.log(data);
    },
    async handleContact(store) {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          this.storeDetail = store;
          let params = { purpose_id: store.id };
          let res = await this.$http.requestSync("/storefronts/is_contact", params, "POST");
          if (res.is_contact || res.is_top) {
            this.contactRequest(false,true);
            return;
          }
          if (!res.is_self_pay) {
            this.contactRequest(false);
          } else {
            this.userIntegralInfo = res;
            this.contactBossPopup = true;
          }
        });
      });
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitCall() {
      this.contactBossPopup = false;
      this.tipPopup = true;
      if (this.userIntegralInfo.is_ok) {
        this.tipOption = {
          title: `与老板联系需要消耗${this.userIntegralInfo.integral}积分`,
          submitText: "联系老板",
          content: `您当前剩余${this.userIntegralInfo.user_integral}积分可用，是否立即与老板联系？`,
          submit: async () => {
            this.contactRequest(true);
          },
        };
      } else {
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          },
        };
      }
    },
    async contactRequest(selfPay, top) {
      let params = {
        purpose_id: this.storeDetail.id,
        is_self_pay: selfPay,
        is_top: top || false
      };
      let res = await this.$http.requestSync("/storefronts/contact", params, "POST");
      if (res.code === 200) {
				if (
					this.$getStoraged("systemInfo").platform == "android" ||
					this.$getStoraged("systemInfo").platform == "ios" ||
					this.$getStoraged("systemInfo").platform == "devtools"
				) {
					uni.makePhoneCall({
						phoneNumber: res.phone,
					});
				} else {
					uni.showModal({
						title: "查看手机号",
						content: res.phone
					});
				}
      } else {
        uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000,
				});
      }
      this.contactBossPopup = false;
      this.tipPopup = false;
    },
    async submitIntention() {
      let params = {
        purpose_id: this.storeDetail.id,
      };
      let res = await this.$http.requestSync("/storefronts/intention", params, "POST");
      if (res.code === 200) {
        this.$layer.message("提交成功");
      } else {
        this.$layer.message(res.message);
      }
      this.contactBossPopup = false;
    },
    closeContactBoss() {
      this.contactBossPopup = false;
    },
  },
  watch: {
    tabActiveIndex: {
      handler(n, o) {
        this.$nextTick(() => {
          this.showMore = false;

          if (this.userLocationInfo || this.getSelectCity.length) {
            // 判断如果用户手动选择城市和获取定位，如果手动选择，优先手动
            if (this.userLocationInfo) {
              this.contentInfo[n].postParams.Filter.city_codes = JSON.stringify(this.userLocationInfo.ad_info.adcode);
            }
            if (this.getSelectCity.length) {
              this.contentInfo[n].postParams.Filter.city_codes = this.getSelectCity[0]["id"];
            }
          }
          this.getList(true, this.contentInfo[n]);
        });
      },
      immediate: true,
    },
    reloadPage(n, o) {
      if (n) {
        console.log(598, this.contentInfo[this.tabActiveIndex]);
        this.contentInfo[this.tabActiveIndex].postParams.page_num = 1;
        this.contentInfo[this.tabActiveIndex].list = [];
        // if (!this.getSelectCity.length) {
        //   this.contentInfo[this.tabActiveIndex].postParams.city_codes = "";
        // }
        this.getList(true, this.contentInfo[this.tabActiveIndex]);
      }
    },
    selectCity: {
      handler(n, o) {
        console.log("监听到了变化781", this.contentInfo[this.tabActiveIndex]);
        if (n) {
          this.contentInfo[this.tabActiveIndex].postParams.page_num = 1;
          this.contentInfo[this.tabActiveIndex].finished = false;
          this.contentInfo[this.tabActiveIndex].list = [];
          if (!this.getSelectCity.length) {
            this.contentInfo[this.tabActiveIndex].postParams.Filter.city_codes = "";
          }
          this.getList(true, this.contentInfo[this.tabActiveIndex]);
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.xl-tabs {
  font-weight: 900 !important;
}

.home {
  background: #f5f5f5;
  height: 86vh;
  .container {
    padding: 0;
    // .c1 {
    //   background-color: #ff9d49;
    // }
    .wrap {
      z-index: 100;
      width: 100%;
      background: #fff;
      box-sizing: border-box;
      border-radius: 0px 0px 15px 15px;
      box-sizing: border-box;
      padding: 18px 10px 1px 10px;
      .swiper {
        height: 92px;
        margin: 15px 0 0 0;
        // padding-bottom: 60px;
        .indicator {
          @include flex(row);
          justify-content: center;

          &__dot {
            height: 6px;
            width: 6px;
            border-radius: 100px;
            background-color: rgba(255, 255, 255, 0.35);
            margin: 0 5px;
            transition: background-color 0.3s;

            &--active {
              background-color: #ffffff;
            }
          }
        }

        .indicator-num {
          padding: 2px 0;
          background-color: rgba(0, 0, 0, 0.35);
          border-radius: 100px;
          width: 35px;
          @include flex;
          justify-content: center;

          &__text {
            color: #ffffff;
            font-size: 12px;
          }
        }
      }
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      position: sticky;
      // top: 58px;
      //#ifdef MP-WEIXIN
      top: 60px;
      //#endif
      //#ifdef H5
      top: 44px;
      //#endif

      background: linear-gradient(180deg, #efefef 0%, #f7f7f7 100%);
      // background: transparent;
      z-index: 999;
      /deep/.u-tabs {
        width: 70%;
        overflow-x: scroll;
        font-size: 14px;
      }
      .right-position {
        position: relative;
        display: flex;
        align-items: center;
        //#ifdef MP-WEIXIN
        margin-right: 0.75rem;
        //#endif
        color: #ff9d49;
        width: 80px;
        flex-shrink: 0;

        .iconfont {
          margin-right: 0.125rem;
        }
        .tap {
          @include ells(1);
        }
        .tips {
          position: absolute;
          width: 213px;
          background: #030303d0;
          top: 40px;
          left: -160px;
          border-radius: 8px;
          box-sizing: border-box;
          padding: 0.625rem;
          &::after {
            content: "";
            position: absolute;
            top: -8px;
            left: 180px;
            width: 0px;
            height: 0px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #030303d0;
          }
          .title-wrap {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: Arial;
            font-weight: 600;
            line-height: 20px;
            opacity: 1;
            span {
              color: #ffffff;
            }
            .iconfont {
              color: #858585;
            }
          }
          .content {
            font-size: 12px;
            font-family: Arial;
            font-weight: 400;
            line-height: 17px;
            color: #ffffff;
            opacity: 1;
            margin: 6px 0;
          }
          .btn {
            width: 76px;
            height: 27px;
            background: #ff8822;
            border-radius: 14px;
            font-size: 12px;
            font-family: Arial;
            font-weight: 600;
            line-height: 17px;
            color: #ffffff;
            text-align: center;
            line-height: 27px;
          }
        }
      }
      //#ifdef H5
      /deep/ .segmented-control {
        width: 68%;
        padding: 0 15px;
        .segmented-control__item {
          width: auto;
          flex-shrink: 1;
          flex: none;
          margin-right: 10px;
        }
        /deep/ .segmented-control--text {
          .segmented-control__item--text {
            color: #ff9d49 !important;
          }
        }
      }
      //#endif
    }
    @media screen and (min-width: 250px) {
      @keyframes translateX {
        0% {
          transform: translateX(0px);
        }
        10% {
          transform: translateX(-10px);
        }
        20% {
          transform: translateX(-20px);
        }
        30% {
          transform: translateX(-30px);
        }
        40% {
          transform: translateX(-40px);
        }
        50% {
          transform: translateX(-50px);
        }
        60% {
          transform: translateX(-40px);
        }
        70% {
          transform: translateX(-30px);
        }
        80% {
          transform: translateX(-20px);
        }
        90% {
          transform: translateX(-10px);
        }
        100% {
          transform: translateX(0px);
        }
      }
      /deep/.u-tabs {
        animation: translateX 0.5s ease;
      }
    }

    .tab-content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 12px;
      background: #ffffff;

      .tab-list {
        display: table;
        width: 100%;
      }
    }

    .c-container {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 20px 10px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      border: 1px solid #dff0ff;
      border-radius: 10px;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
      background: #f9fcff;
      .c-c-title {
        font-size: 13px;
        color: #555555;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        .t-badge {
          padding: 4px 5px;
          margin-right: 4px;
          font-size: 10px;
          color: #2c9cfd;
          border-radius: 3px 3px 3px 3px;
          background: rgba(62, 166, 255, 0);
          border: 1px solid #2c9cfd;
        }
      }
      .c-c-info {
        display: flex;
        justify-content: space-around;
        margin: 15px 0;
        .i-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          .name {
            font-weight: 600;
            color: #2c9cfd;
            font-size: 18px;
            .unit {
              font-size: 12px;
            }
          }
          .text {
            margin-top: 5px;
            font-size: 10px;
            color: #999999;
          }
        }
      }
      .c-c-image {
        display: flex;
        margin-bottom: 10px;
        .image {
          margin-right: 10px;
          width: 76px;
          height: 76px;
          border-radius: 6px;
        }
      }
      .c-c-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #e4e4e4;
        .a-info {
          display: flex;
          font-size: 11px;
          .iconfont {
            color: #2c9cfd;
          }
          .address {
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333333;
            margin-right: 5px;
          }
          .distance {
            padding: 0 5px;
            border-left: 1px solid #e4e4e4;
            color: #666666;
          }
          .time {
            padding-left: 5px;
            border-left: 1px solid #e4e4e4;
            color: #999999;
          }
        }
        .a-detail {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #2c9cfd;
          .a-icon {
            width: 14px;
            height: 14px;
          }
        }
        .a-btn {
          width: 89px;
          height: 31px;
          background: #f76a6a;
          border-radius: 16px 16px 16px 16px;
          color: #fff;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;

          .iconfont {
            margin: 0 5px 0 12px;
          }
        }
      }
      .c-c-top {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 36px;
        height: 36px;
      }
    }
  }

  .ydts {
    width: 100%;
    height: 75px;
    // position: fixed;
    // bottom: 0px;
    padding-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    .ydts_wrap {
      width: 204px;
      height: 32px;
      background: #ededed;
      border-radius: 4px;
      opacity: 1;
      font-size: 12px;
      font-family: Arial;
      font-weight: 600;
      color: rgb(139, 139, 139);
      margin: 5px auto 0;
      line-height: 32px;
      text-align: center;

      .p2 {
        font-size: 13px;
        font-weight: 600;
        color: #ff8822;
      }
    }
  }

  .tip-share {
    position: fixed;
    bottom: 142px;
    right: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    .share-btn {
      margin: 0;
      padding: 0;
      height: 92px;

      .image {
        width: 80px;
        height: 92px;
      }
    }
    .close {
      width: 18px;
      height: 18px;
    }
  }
}
</style>
